What is the purpose of the alt attribute in <img>?

Role of the alt Attribute in <img>

The alt attribute in the <img> tag provides alternative text for an image. This text is displayed if the image cannot be loaded and is also used by screen readers to describe the image to visually impaired users.

Key Points about alt

1
It improves accessibility by giving screen readers a description of the image.
2
It is shown when the image fails to load (e.g., broken link or slow internet).
3
It helps search engines understand the content of images, improving SEO.
4
If the image is decorative and not essential, the alt attribute can be left empty (alt="").

Example Usage

In short: The alt attribute provides alternative text for images, making web pages more accessible and user-friendly.

Difficulty: 2/10

Topics: accessibility, SEO, fallback content

Scenario Questions

0-2 years experience

1
We're adding a product photo to a new item page. How would you write the alt attribute for that image?
2
If the image fails to load in the browser, what will the user see based on your alt text?
3
What happens for a screen‑reader user when an <img> tag has no alt attribute?

2-5 years experience

1
Our CMS lets editors upload images, but many leave the alt field blank. How would you enforce proper alt usage without breaking their workflow?
2
An accessibility audit flagged missing alt on decorative icons used throughout the UI. How would you fix this while keeping the layout unchanged?
3
Why might a very long alt description be problematic for users of assistive technology?

5-8 years experience

1
We serve millions of images via a CDN. Discuss the trade‑offs between generating alt text automatically with AI versus requiring manual entry at scale.
2
Design a linting or build‑time check that ensures every <img> in our codebase has an appropriate alt attribute, considering legacy pages that may not follow current guidelines.
3
Our component library renders icons as <img>. How would you handle alt text for decorative versus meaningful icons to satisfy both accessibility and SEO requirements?

8+ years experience

1
We're migrating a large legacy monolith to a component‑driven architecture. Outline a strategy for auditing and updating alt attributes across thousands of pages while balancing developer velocity and compliance.
2
Describe a cross‑team policy for alt text in a multi‑brand platform that must handle localization, brand guidelines, and automated testing.
3
If we need to support screen readers in multiple languages, how would you manage the generation, translation, and maintenance of alt text at scale?

Follow-up Questions

❓What would you put in the alt for a company logo?
❓How does alt text influence search engine rankings?
❓What are the consequences of leaving alt empty on a functional image?